// @ts-nocheck
import fetch from '@system.fetch';
//import qs from 'querystring'//npm install qs
import prompt from '@system.prompt';
//引入震颤数据x轴的模型
import lineData from "../../common/datas/lineData.js"
export default {
    data: {
        year:2022,
        month:'0'+4,
        day:16,
        h:'0'+4,
        m:23,
        nowDate:'05-08',
        level:3,
        kneading_time:4,
        count:6,
        num:[],
        time:[],
        canvasX: 360,
        canvasY: 300,
        lineData, //震颤
        lineOps: {
            xAxis: {
                min: 0,
                max: 7,
                axisTick: true,
                display: true,
                color: '#004e8df1',
            },
            yAxis: {
                min: 0,
                max: 10,
                display: true,
                color: '#004e8df1',
            },
            series: {
                lineStyle: {
                    width: "3px",
                    smooth: true,
                },
                headPoint: {
                    shape: "circle",
                    size: 3,
                    strokeWidth: 3,
                    fillColor: '#ffffff',
                    strokeColor: '#6fffffff',
                    display:false,
                },
                loop: {
                    margin: 4,
                    gradient: true,
                }
            }
        },
        obj: {
            chartZone: [40, 10, 350, 180], //图表左上角与右下角坐标数组
            yAxisLable: ["0", "1","2","3", "4", "5"], //Y轴内容
            yMax: '5', //Y轴最大值
            xAxisLable: ["4.7", "4.8", "4.9", "4.10", "4.11", "4.12", "4.13"], //x轴内容
            guideLine: true, //是否存在辅助线
        }
    },
    onInit() {
        this.lineData[0].data = [6,2,4,8,4,1,6,6,2];
        this.lineData[1].data = [];
        fetch.fetch({
            url:`http://49.4.115.226:8000/get_kneading_phone_data?date=`+this.nowDate,
            responseType: "json", //请求的参数类型
            method: "POST",
            success: (resp) => {
                var resp_dict = JSON.parse(resp.data)
                var kneading = resp_dict['level']
                this.level=resp_dict['recent_level']
                this. kneading_time=resp_dict['aver_time']
                this. count=resp_dict['aver_kneading']
                this.num=resp_dict['recent_kneading']
                this.time=resp_dict['recent_kneading_time']
                for (var i =0; i < kneading.length; i++) {
                    //数据加到图形中
                    this.$refs.linechart.append({
                        serial: 0,
                        data: [ kneading[i]]
                    })
                }
            },
            fail: (resp) => {
                console.log("获取数据失败")
            }
        });
    },
    onShow() {
        const axis_el = this.$refs.canvas;
        const axis_ctx = axis_el.getContext('2d');
        this.Line_drawAxis(axis_ctx)
        this.Line_drawYLables(axis_ctx)
        this.Line_drawXLables(axis_ctx)
    },
    //绘制X，Y坐标轴
    Line_drawAxis(axis_ctx) {
        let chartZone = this.obj.chartZone
        const ctx = axis_ctx;
        ctx.lineWidth = 1
        ctx.strokeStyle = '#b4353535';
        ctx.beginPath();
        ctx.moveTo(chartZone[0], chartZone[1])
        ctx.lineTo(chartZone[0], chartZone[3])
        ctx.lineTo(chartZone[2], chartZone[3])
        ctx.stroke()
    },
    Line_drawYLables(axis_ctx) {
        //        const el = this.$refs.canvas;
        ////        const el = this.$element('the-canvas');
        const ctx = axis_ctx;
        let labels = this.obj.yAxisLable;
        let yLength = (this.obj.chartZone[3] - this.obj.chartZone[1]) * 0.98
        let gap = yLength / (labels.length - 1)
        let option = this.obj
        labels.forEach(function (label, index) {
            //绘制坐标文字
            //offset为y轴上内容起点与y轴的距离
            let offset = ctx.measureText(label).width + 10;
            ctx.save()
            ctx.strokeStyle =  '#eaeaea';
            ctx.font = "10px"
            ctx.fillText(label, option.chartZone[0] - offset, option.chartZone[3] - index * gap);
            ctx.restore()
            //绘制小间隔（坐标轴原点不需要绘制小间隔）
            if (index == 0) {
                return
            } else {
                ctx.beginPath();
                ctx.strokeStyle =  '#c9aca9a9'
                ctx.lineWidth =0.7
                //我们在此处将小间隔的长度设置为10px
                ctx.moveTo(option.chartZone[0] + 10, option.chartZone[3] - index * gap);
                ctx.lineTo(option.chartZone[0], option.chartZone[3] - index * gap)
                ctx.stroke()
            }
            //绘制辅助线
            if (option.guideLine == true) {
                //x轴坐标不需要绘制辅助线
                if (index == 0) {
                    return
                } else {
                    ctx.beginPath()
                    ctx.strokeStyle =  '#c9aca9a9'
                    ctx.lineWidth =0.7
                    ctx.moveTo(option.chartZone[0], option.chartZone[3] - index * gap)
                    ctx.lineTo(option.chartZone[2], option.chartZone[3] - index * gap)
                    ctx.stroke()
                }
            }
        })
    },
    Line_drawXLables(axis_ctx) {

        let labels = this.obj.xAxisLable;
        //和Y轴真正使用到的长度类似，X轴我们设定只用了96%
        let xLength = (this.obj.chartZone[2] - this.obj.chartZone[0]) * 0.96
        let gap = xLength / (labels.length)
        let option = this.obj
        labels.forEach(function (label, index) {
            const context = axis_ctx;
            //绘制坐标文字
            let offset = context.measureText(label).width
            context.save()
            context.strokeStyle = '#eaeaea';
            context.font = "14px"
            context.fillText(label, option.chartZone[0] + (index + 1) * gap - offset, option.chartZone[3] + 20);
            //绘制小间隔
            context.beginPath();
            context.strokeStyle = '#353535';
            context.moveTo(option.chartZone[0] + (index + 1) * gap - offset / 2, option.chartZone[3]);
            context.lineTo(option.chartZone[0] + (index + 1) * gap - offset / 2, option.chartZone[3] + 5)
            context.stroke()
            //存储偏移量
            option.offsetXLabel = offset / 2
        })

    },
}
